<template>
    <div class="comment_box">
      <div class="comment_input">
        <input class="input" type="text" v-model="commentCon" @keyup.enter="sendCommentCon">
        <input class="button" type="button"  value="评论" @click="sendCommentCon">
      </div>
      <div class="comment_list clearfix">
        <dl class="clearfix" v-for="(str, index) in commentList">
          <dd>
            <img :src="str.userImg" alt="">
          </dd>
          <dd>
            <div class="name clearfix">
              <span class="clearfix">{{str.userName}}</span>
              <p class="reply clearfix">回复</p>
              <p class="dianzan clearfix" :class="{dianzan2:str.isDianzan}" @click="dianzan(str, index)">{{str.dianzanList.length}}</p>
              <i class="clearfix">2小时前</i>
            </div>
            <p class="comment_con">{{str.commentCon}}</p>
            <div v-if="str.replyList.length" class="reply_con clearfix">
              <img :src="str.replyList[0].userImg" alt="">
              <p>{{str.replyList[0].replyCon}}</p>
              <p>查看全部回复{{str.replyList.length}}条回复></p>
            </div>
          </dd>
        </dl>
      </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        commentList: '',
        commentCon: '',
        userId: 0
      }
    },
    mounted: function () {
      this.$http.get('./static/data/comment.json').then((res) => {
        this.commentList = res.body.commentList
      })
    },
    methods: {
      sendCommentCon: function () {
        if (this.commentCon.length < 8 || this.commentCon.length > 100) {
          alert('评论字数在8~100之间！')
          this.commentCon = ''
        } else {
          var sendinfo = {
            'commentId': '',
            'userId': 0,
            'userName': '龙云心语',
            'userImg': '../../../static/img/bookinfo/user3.jpg',
            'commentCon': this.commentCon,
            'commentTime': new Date().getTime(),
            'isDianzan': 0,
            'dianzanList': [],
            'replyList': []
          }
          this.commentList.unshift(sendinfo)
          alert('评论成功')
          this.commentCon = ''
        }
      },
      dianzan: function (str, index) {
        if (!str.isDianzan) {
          this.commentList[index].isDianzan = true
          // ajax更新数据库 ...
          // 更新当前数据，重新渲染
          this.commentList[index].dianzanList.push(
            {
              'dianzanId': 0,
              'userId': this.userId,
              'userName': '我叫张小浪',
              'dianzanTime': 1509797882483
            }
          )
        }
      }
    }
  }
</script>


<style scoped>
  .comment_box .comment_input {
    display: flex;
  }
  .comment_box .comment_input .input{
    flex:9 ;
    border: 1px solid #CDCDCD;
    box-shadow: 0 0 0.5em rgba(0,0,0,.3) inset;
    padding:5px 10px;
    height: 36px;
  }
  .comment_box .comment_input .button{
    flex: 2;
    background: #F60;
    padding:5px 10px;
    color: #fff;
    height: 36px;
    border: 1px solid #F60;
  }
  .comment_list dl{
    padding:14px 0 7px 0;
    border-bottom:1px solid #cdcdcd;
  }
  .comment_list dl:nth-last-child(1){
    border: none;
  }
  .comment_list dl dd{
    float: left;
  }
  .comment_list dl dd:nth-child(1){
    width: 50px;
  }
  .comment_list dl dd img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .comment_list dl dd:nth-child(2){
    width: 226px;
  }
  .comment_list dl .name span{
    color:#ccc;
    font-size: 12.5px;
    float: left;
    line-height: 32px;
  }
  .comment_list dl .name i{
   display: block;
    color: #ccc;
    font-size: 12px;
    line-height: 15px;
  }
  .comment_list dl .comment_con{
    color: #333;
    word-break:break-all;
    font-size:12px;
    line-height: 20px;
  }
  .comment_list dl .reply{
    float: right;
    font-size: 12px;
    padding-right: 20px;
    background: url(../../../static/img/huifu.png) center right no-repeat;
    background-size: 16px 16px;
    line-height: 32px;
  }

  .comment_list dl .dianzan{
    float: right;
    margin-right: 6px;
    font-size: 12px;
    padding-right: 20px;
    line-height: 32px;
    background: url(../../../static/img/dianzan1.png) center right no-repeat;
    background-size: 16px 16px;
  }
  .comment_list dl .dianzan2{
    background: url(../../../static/img/dianzan2.png) center right no-repeat;
    background-size: 16px 16px;
  }
  .reply_con{
    margin-top: 10px;
  }
  .reply_con p{
    color: #333;
    word-break:break-all;
    font-size:12px;
    line-height: 20px;
  }
  .reply_con p:nth-child(2){
    color:#ccc;
  }
  .comment_list dl dd .reply_con img{
    width: 26px;
    height: 26px;
  }
</style>
